<template>
  <div class="page-container">
    <!--工具栏-->
    <el-row>
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
          <el-row>
            <el-col :span="3">
              <el-form-item>
                <el-input v-model="filters.storeName" clearable placeholder="店铺名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item>
                <el-input v-model="filters.code" clearable placeholder="商品编码"></el-input>
              </el-form-item>
            </el-col >
            <el-col :span="3">
              <el-form-item>
                <el-input v-model="filters.chineseName" clearable placeholder="商品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item style="width:100%">
                <el-col :span="11">
                  <el-form-item>
                    <el-input v-model="filters.totalStock" clearable placeholder="总库存" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <span>-</span>
                </el-col>
                <el-col :span="11">
                  <el-form-item>
                  <el-input v-model="filters.totalStockEnd" clearable placeholder="总库存" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-col :span="11">
                  <el-form-item>
                    <el-input v-model="filters.availableStock" clearable placeholder="可售库存"
                              style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-form-item>
                    <el-input v-model="filters.availableStockEnd" clearable placeholder="可售库存"
                              style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 查询  重置 -->
          <el-row>
            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                         @click="resetForm('filters')"/>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
        <!--表格显示列界面-->
        <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                    @handleFilterColumns="handleFilterColumns"></table-column-filter-dialog>
      </div>
    </el-row>

    <el-row style="margin-top: 5px;">
      <cy-table
        :size="size"
        :height="350"
        :content="pageResult"
        :totalSize="totalCount"
        :columns="filterColumns"
        :showBatchDelete="false"
        :showBatchReview="false"
        :showOperation="false"
        :showEditOperation="false"
        :showDeleteOperation="false"
        @findPage="findPage"
        ref="CyTable"></cy-table>
    </el-row>

  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        filters: {},
        totalCount: 0,
        columns: [
          {prop: "merchantName", label: "商家名称", minWidth: 120},
          {prop: "storeName", label: "店铺名称", minWidth: 120},
          {prop: "code", label: "商品编码", minWidth: 120},
          {prop: "chineseName", label: "商品名称", minWidth: 120},
          {prop: "name", label: "计量单位", minWidth: 120},
          {prop: "totalStock", label: "总库存", minWidth: 120},
          {prop: "blockStock", label: "冻结库存", minWidth: 120},
          {prop: "availableStock", label: "可售库存", minWidth: 120},
        ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [],
      };
    },
    methods: {
      // 获取分页数据
      findPage: function (params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.queryShopInventory(this_.filters, function (res) {
          this_.pageResult = res.data.rows;
          this_.totalCount = Number(res.data.total);
        });
      },
      // 清空文本值
      resetForm(formName) {
        this.filters = {};
        this.findPage();
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped>

</style>
